<template>
    <h1>setup</h1>
    <h2>{{ str }}---{{ str2 }}</h2>
    <input type="text" v-model="str">
    <input type="text" v-model="str2">
    <button @click="handle">点击</button>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
    //defineComponent 自定义一个组件 
    export default defineComponent({
        // vue2中：选项式api，需要在规定的选项块(data,methods,computed,watch...)中写代码
        //vue3中，组合式api，可以通过引入的方法函数来书写代码，只需要书写到setup()函数中即可(ref,rective,computed)
        //setup作用: 1.是组合式api的入口，只在初始化的时候执行一次
        // 2.setup 是处在生命周期beforeCreate和created之前，setup中无法使用data和this
        // 3.setup中定义的函数变量，都要return出去, 否则用不了
        setup(){
            //ref定义一个响应式数据
            let str = ref("我是刘德华")
            // 不是响应式数据
            let str2 = "我是刘华强"
            // 定义一个数据
            let handle = () =>{
                console.log("vue3中的方法")
            }
            // 定义的变量，方法，需要return出来才能使用
            return {
                str,
                str2,
                handle
            }
        }
    })
</script>